import React, { memo, useEffect } from "react";
import { useDispatch } from "react-redux";

import "./index.scss";
import songActions from "store/action/songlist";

import WYSongsHeader from "./c-cpns/songs-header";
import WYSongsList from "./c-cpns/songs-list";

export default memo(function WYSongs() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(songActions.getSongCat());
    dispatch(songActions.getSongCatList());
  }, [dispatch]);

  return (
    <div className="wy-songs wrap-v2">
      <WYSongsHeader />
      <WYSongsList />
    </div>
  );
});
